Tutorial Brief

IPython notebook provides a variaty of web widgets that can interact with python code running the the background kernel.

Finding Help:

NumPy

Base N-dimensional array package

SciPy

Fundamental library for scientific computing

Matplotlib

Comprehensive 2D Plotting

IPython

Enhanced Interactive Console

SymPy

Symbolic mathematics

Pandas

Data structures & analysis

Why do we use widgets?

IPython includes an architecture for interactive widgets that tie together Python code running in the kernel and JavaScript/HTML/CSS running in the browser. These widgets enable users to explore their code and data interactively.

http://nbviewer.ipython.org/github/ipython/ipython/blob/2.x/examples/Interactive%20Widgets/Index.ipynb

Import libraries


In [1]:
import numpy as np
import matplotlib.pyplot as plt

from IPython.html import widgets
from IPython.html.widgets import interact
from IPython.display import display

Build-it Widgets


In [2]:
tab1_children = [widgets.ButtonWidget(description="ButtonWidget"),
                 widgets.CheckboxWidget(description="CheckboxWidget"),
                 widgets.DropdownWidget(values=[1, 2], description="DropdownWidget"),
                 widgets.RadioButtonsWidget(values=[1, 2], description="RadioButtonsWidget"),
                 widgets.SelectWidget(values=[1, 2], description="SelectWidget"),
                 widgets.TextWidget(description="TextWidget"),
                 widgets.TextareaWidget(description="TextareaWidget"),
                 widgets.ToggleButtonWidget(description="ToggleButtonWidget"),
                 widgets.ToggleButtonsWidget(values=["Value 1", "Value2"], description="ToggleButtonsWidget"),
                 ]

tab2_children = [widgets.BoundedFloatTextWidget(description="BoundedFloatTextWidget"),
                 widgets.BoundedIntTextWidget(description="BoundedIntTextWidget"),
                 widgets.FloatSliderWidget(description="FloatSliderWidget"),
                 widgets.FloatTextWidget(description="FloatTextWidget"),
                 widgets.IntSliderWidget(description="IntSliderWidget"),
                 widgets.IntTextWidget(description="IntTextWidget"),
                 ]

tab1 = widgets.ContainerWidget(children=tab1_children)
tab2 = widgets.ContainerWidget(children=tab2_children)


i = widgets.AccordionWidget(children=[tab1, tab2])

i.set_title(0,"Basic Widgets")
i.set_title(1,"Numbers Input")

display(i)

Simple Example

We will define a function that print the factorial.

$f(x) = x!$

$f(x) = x \times (x-1) \times ... 1$

$f(3) = 3! = 3 \times 2 \times 1 = 6$


In [3]:
def factorial(x):
    print "%s!= %s" % (x,np.math.factorial(x))

def factorial2(x):
    if type(x) == int:
        if x >= 0:
            print np.prod(np.arange(1,x+1))
        else:
            print "ERROR: Number must be positive"
    else:
        print "ERROR: Only interger is allowed"

Now we will test it using a code cell


In [4]:
factorial(3)


3!= 6

Using interact function

We will link that to a slider to make the x a variable that we can control.


In [5]:
i = interact(factorial, x=(0,100))


100!= 93326215443944152681699238856266700490715968264381621468592963895217599993229915608941463976156518286253697920827223758251185210916864000000000000000000000000

Controlling a Chart


In [13]:
#This function plot x, y and adds a title
def plt_arrays(x, y, title="", color="red", linestyle="dashed", linewidth=2):
    fig = plt.figure()
    axes = fig.add_subplot(111)
    axes.plot(x,y, color=color, linestyle=linestyle, linewidth=linewidth)
    axes.set_title(title)
    axes.grid()
    plt.show()

We will define a function that return the following:

$f(x) = ax^3 + bx^2 + cx + d$

where a,b,c and d are are constants.


In [11]:
def f(a, b, c, d, **kwargs):
    x=np.linspace(-10, 10, 20)
    y = a*(x**3) + b*(x**2) + c*x + d
    
    title="$f(x) = (%s)x^{3} + (%s)x^{2} + (%s)x + (%s)$" % (a,b,c,d)
    
    plt_arrays(x,y, title=title, **kwargs)

In [8]:
#Define Constants
a=0.25
b=2
c=-4
d=0

f(a, b, c, d)



In [14]:
i = interact(f,
             a=(-10.,10),
             b=(-10.,10),
             c=(-10.,10),
             d=(-10.,10),
             color = ["red", "blue", "green"],
             linestyle=["solid", "dashed"],
             linewidth=(1,5)
             )


Displaying a widget from interact function


In [17]:
i.widget